<!DOCTYPE html>
<html style="height: 100%;">

<head>
    <title>信息科开放平台</title>
    <link rel="shortcut icon" href="/static/img/Icon.ico"> <!-- 网站图标 必须ico文件 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
    <script src="/static/js/jquery-3.4.1.min.js"></script>

    <!--引入WebSocket断线重连插件-->
    <script src="/static/js/reconnecting-websocket.min.js"></script>

    <!-- 引入CSS： elementUI -->
    <link rel="stylesheet" href="/static/element-UI/index.css">
    <!-- 引入JS： Vue (before ElementUI JS)-->
    <script src="/static/vue/vue.js"></script>
    <!-- 引入JS： ElementUI JS -->
    <script src="/static/element-UI/index.js"></script>


    <style>
        body {
            /* 鼠标指针的样式 */
            cursor: url(/static/img/cursor.ico), auto;
        }
    </style>
    <script>
        // 低版本谷歌不支持ES6，没有padStart函数，解决办法是自己重新实现String.prototype.padStart
        // 需在head中定义
        if (!String.prototype.padStart) {
            String.prototype.padStart = function padStart(targetLength, padString) {
                targetLength = targetLength >> 0; //floor if number or convert non-number to 0;
                padString = String((typeof padString !== 'undefined' ? padString : ' '));
                if (this.length > targetLength) {
                    return String(this);
                } else {
                    targetLength = targetLength - this.length;
                    if (targetLength > padString.length) {
                        padString += padString.repeat(targetLength / padString.length); //append to original to ensure we are longer than needed
                    }
                    return padString.slice(0, targetLength) + String(this);
                }
            };
        }
    </script>
</head>


<body style="height: 100%;overflow:hidden;margin: 0px;">
<div id="app" style="height: 100%;">

    <!--    顶栏  -->
    <el-row id="topMenuRow">
        <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                @select="topMenu_handleSelect"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
            <el-menu-item index="1">门诊来院登记系统</el-menu-item>

            <el-submenu index="2" style="float: right">
                <template slot="title" id="userNameText">信息科 陈呵呵</template>
                <el-menu-item index="2-1">个人资料</el-menu-item>
                <el-menu-item index="2-2">注销</el-menu-item>
            </el-submenu>

        </el-menu>
    </el-row>


    <el-row style="height: 100%">
        <!--    左侧菜单    -->
        <el-col :span="3" style="height: 100%">
            <el-menu
                    default-active="1"
                    class="el-menu-vertical-demo"
                    @open="leftMenu_handleOpen"
                    @close="leftMenu_handleClose"
                    @select="leftMenu_handleSelect"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    style="height: 100%">
                <el-menu-item index="1">
                    <i class="el-icon-menu"></i>
                    <span slot="title">登记台</span>
                </el-menu-item>
                <el-menu-item index="2">
                    <i class="el-icon-document"></i>
                    <span slot="title">统计报表</span>
                </el-menu-item>


            </el-menu>
        </el-col>

        <!--     右侧工作区域    -->
        <el-col :span="20" :offset="1" style="height:100%;">

            <!--空白间隔栏-->
            <el-row style="height: 20px;"></el-row>
            <!--       工具栏-->
            <el-row id="toolBarRow">

                <el-col :offset="9" :span="15">

                    <el-form :inline="true" :model="toolBarData" class="demo-form-inline" size="small">

                        <el-form-item label="登记台：">


                            <el-select v-model="currentSelectObj" placeholder="请选择登记台" id="selectDjt"
                                       @change="onChangeElSelect($event)">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.djtmc"
                                        :value="item"
                                        :disabled="item.disabled"

                                >
                                </el-option>
                            </el-select>

                        </el-form-item>
                        <el-form-item>
                            <el-button id="btn_record" type="warning" round @click="btn_record_click()"
                            >登记
                            </el-button>
                        </el-form-item>
                    </el-form>
                </el-col>

            </el-row>

            <!--  分割线   -->
            <el-row id="dividerRow">
                <el-col :span="17">
                    <el-divider></el-divider>
                </el-col>
            </el-row>


            <!--表格区域-->
            <el-row style="height:100%;">

                <!-- 报表 -->
                <el-col id="statisticTable" :span="24">
                    <el-table
                            :data="tableData"
                            fit
                            stripe
                            style="width: 100%;"
                            height="100%"
                            size="small">
                        <el-table-column
                                label="序号"
                                type="index"
                                align="center"
                                width="50px">
                        </el-table-column>
                        <el-table-column
                                prop="brxm"
                                label="姓名"
                                align="center"
                                min-width="90px">
                        </el-table-column>
                        <el-table-column
                                prop="brxb"
                                label="性别"
                                align="center"
                                min-width="50px">
                        </el-table-column>
                        <el-table-column
                                prop="brnl"
                                label="年龄"
                                align="center"
                                min-width="50px">
                        </el-table-column>
                        <el-table-column
                                prop="sfzh"
                                label="身份证号"
                                align="center"
                                min-width="80px"
                                :show-overflow-tooltip='true'>
                        </el-table-column>
                        <el-table-column
                                prop="jzkh"
                                label="卡号"
                                align="center"
                                min-width="80px"
                                :show-overflow-tooltip='true'>
                        </el-table-column>
                        <el-table-column
                                prop="lxdh"
                                label="联系电话"
                                align="center"
                                min-width="80px"
                                :show-overflow-tooltip='true'>
                        </el-table-column>
                        <el-table-column
                                prop="jtdz"
                                label="家庭地址"
                                align="center"
                                min-width="80px"
                                :show-overflow-tooltip='true'>
                        </el-table-column>
                        <el-table-column
                                prop="lymd"
                                label="来院目的"
                                align="center"
                                min-width="150px"
                                :show-overflow-tooltip='true'>
                        </el-table-column>
                        <el-table-column
                                prop="djryxm"
                                label="登记人员"
                                align="center"
                                min-width="80px">
                        </el-table-column>
                        <el-table-column
                                prop="djsj"
                                label="登记时间"
                                min-width="140px"
                                align="center"
                                :formatter="dateFormatDJSJ"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="yqbszw"
                                label="院区"
                                min-width="60px"
                                align="center"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="frs"
                                label="发热史"
                                min-width="70px"
                                align="center"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="ljs"
                                label="旅居史"
                                min-width="70px"
                                align="center"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="jcs"
                                label="接触史"
                                min-width="70px"
                                align="center"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="bzxx"
                                label="备注"
                                min-width="100px"
                                align="center"
                                :show-overflow-tooltip='true'
                        >
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </el-col>
    </el-row>

    <!-- 弹出框 -->
    <el-dialog :visible.sync="dialogFormVisible" width="86%" center :close-on-click-modal="false"
               :show-close="false"
               @opened="handleDialogOpen()"
    >
        <!--行：读社保卡、读身份证按钮-->
        <el-row>
            <el-col :span="16">
                <el-col :span="14" :offset="6" style="height:100%;">
                    <el-form label-position="right"
                             style="background-color: white"
                             size="small"
                             @submit.native.prevent
                    >
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="卡号：" prop="name" label-width="100px" size="small">
                                    <el-input v-model="SFZdata.jzkh" id="jzkhInput"
                                              v-focus
                                              placeholder="能刷院内卡"
                                              @keyup.enter.native="jzkhInput_enterKey()"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label-width="50px">
                                    <el-button id="btn_readYKT" type="warning" @click="readYKT()"
                                               :loading="isLoading_btn_readYKT">读社保卡
                                    </el-button>
                                    <el-button id="btn_readSFZ" type="warning" @click="readSFZ()"
                                               :loading="isLoading_btn_readSFZ">
                                        读身份证
                                    </el-button>
                                </el-form-item>
                            </el-col>

                        </el-row>
                    </el-form>
                </el-col>
            </el-col>

        </el-row>

        <!--行：分割线-->
        <el-row>
            <el-col :span="16">
                <el-col :span="17" :offset="6">
                    <el-divider></el-divider> <!-- 分割线 -->
                </el-col>
            </el-col>

            <el-col :span="8">
                <el-divider></el-divider> <!-- 分割线 -->
            </el-col>

        </el-row>

        <!--行：表单-->
        <el-row>
            <el-col :span="16" class="SFZform">

                <el-row>
                    <!-- 列：头像框 -->
                    <el-col :span="6">

                        <el-form label-width="50px"
                                 style="background-color: white"
                        >
                            <el-form-item id="imgItem">
                                <template>
                                    <div class="demo-fit">
                                        <div class="block">
                                            <el-avatar style="background-color:white" id="img" shape="square"
                                                       :size="150" fit="fill"
                                                       src="/static/img/SFZ head 2.jpg"></el-avatar>
                                        </div>
                                    </div>
                                </template>

                            </el-form-item>
                        </el-form>
                    </el-col>
                    <!-- 列：身份证详细信息表单 -->
                    <el-col :span="14">
                        <el-form label-position="right" label-width="100px" :model="SFZdata"
                                 style="background-color: white;padding-top:0px;padding-right:55px;"
                                 size="small"
                        >
                            <el-form-item label="姓名：" prop="name" class="is-required">
                                <el-input v-model="SFZdata.name" id="nameInput"></el-input>
                            </el-form-item>
                            <el-form-item label="年龄：">
                                <el-input v-model="SFZdata.age"></el-input>
                            </el-form-item>
                            <el-form-item label="性别：">
                                <el-input v-model="SFZdata.gender"></el-input>
                            </el-form-item>
                            <el-form-item label="身份证号：" prop="sfzh">
                                <el-input v-model="SFZdata.sfzh"></el-input>
                            </el-form-item>
                            <el-form-item label="家庭地址：">
                                <el-input v-model="SFZdata.address"></el-input>
                            </el-form-item>
                            <el-form-item label="联系电话：">
                                <el-input v-model="SFZdata.lxdh"></el-input>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>


            </el-col>
            <el-col :span="8">
                <el-form label-position="right" label-width="120px" :model="SFZdata"
                         style="background-color: white;padding-top:0px;padding-right:55px;"
                         size="small"
                >
                    <el-form-item label="来院目的：" class="is-required">
                        <el-select v-model="visitReasonValue" placeholder="请选择">
                            <el-option
                                    v-for="item in visitReason"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="询问：">
                        <el-checkbox-group v-model="checkBoxList" @change="checkListChange($event)">
                            <el-checkbox label="否认近期发热史 (T<37.3°C)"></el-checkbox>
                            <el-checkbox label="否认近期中高风险区旅居史 (30天内)"></el-checkbox>
                            <el-checkbox label="否认近期中高风险区接触史 (30天内)"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="备注：">
                        <el-input id="inputBzxx" type="textarea" v-model="bzxx" placeholder="请填写发热史、旅居史、接触史"
                                  rows="4"
                                  :disabled="bzxxInputDisabled"></el-input>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>

        <div slot="footer" class="dialog-footer">
            <el-button @click="cancleForm()">取 消</el-button>
            <el-button type="primary" @click="submitForm()">确 定</el-button>
        </div>
    </el-dialog>


</div>


<script>
    /*
    *  定义全局变量
    */
    var g_toastHandle;  // vue创建的toast实例，用于提示正在叫号的病人
    var IpAndPort = window.location.host; // IP和端口号

    // 解析token
    var token = getCookie('token');
    var strings = token.split("."); //截取token，获取载体
    var userInfo = JSON.parse(decodeURIComponent(escape(window.atob(strings[1].replace(/-/g, "+").replace(/_/g, "/"))))); //解析，需要吧‘_’,'-'进行转换否则会无法解析
    $("#userNameText")[0].innerHTML = "&nbsp;[&nbsp;" + userInfo.ksmc + "&nbsp;]&nbsp;&nbsp;" + userInfo.ygxm;


    // 本页面的vue对象
    var vue = new Vue({
        el: '#app',
        data() {
            return {
                yqbs: 0,  // 院区标识
                checked: true,
                checkBoxList_checkedArr: null,  // 旅居史多选框被选中的值
                备份_checkBoxList: ["否认近期中高风险区旅居史 (30天内)", "否认近期中高风险区接触史 (30天内)", "否认近期发热史 (T<37.3°C)"], // 用于每次关闭表单时全选checkbox
                checkBoxList: ['否认近期发热史 (T<37.3°C)', '否认近期中高风险区旅居史 (30天内)', '否认近期中高风险区接触史 (30天内)'],
                isLoading_btn_readSFZ: false,
                isLoading_btn_readYKT: false,
                dialogFormVisible: false,
                bzxxInputDisabled: true,
                bzxx: '',   // 备注信息
                visitReasonValue: '',
                visitReason: [{
                    value: '1',
                    label: '就诊'
                }, {
                    value: '2',
                    label: '陪伴就诊'
                }, {
                    value: '3',
                    label: '开药'
                }, {
                    value: '4',
                    label: '检查、检验'
                }, {
                    value: '5',
                    label: '取单'
                }, {
                    value: '6',
                    label: '办事'
                }],
                SFZdata: {
                    name: '',
                    age: '',
                    gender: '',
                    sfzh: '',
                    address: '',
                    lxdh: '',
                    jzkh: ''
                },
                formLabelWidth: '120px',


                activeIndex: '1',
                currentSelectObj: {},  // EL-Select选择器选中的option对象
                options: [{
                    djtmc: '总院',
                    value: 1
                }, {
                    djtmc: '分院（莲庄南路）',
                    value: 2
                }],
                tableData: [],
                toolBarData: {
                    dxmc: '疫苗接种队列',
                    zsmc: null
                }
            };
        },
        methods: {

            //
            // 当Dialog打开
            //
            handleDialogOpen() {
                // 焦点转移至卡号输入框
                $("#jzkhInput").focus();
            },

            //
            // 点击【登记】（弹出登记台Dialog）
            //
            btn_record_click() {
                $("[id=btn_record]").blur();  // 按钮颜色恢复
                if ($("#selectDjt").val() == '') {
                    vue.$message.warning('请选择登记台');
                    return;
                }
                vue.dialogFormVisible = true;
            },

            //
            // 当'卡号框'键入回车
            //
            jzkhInput_enterKey() {
                if (vue.SFZdata.jzkh == '') {
                    return;
                }
                // 清空身份证表单（除了卡号）
                vue.SFZdata.name = '';
                vue.SFZdata.gender = '';
                vue.SFZdata.sfzh = '';
                vue.SFZdata.lxdh = '';
                vue.SFZdata.age = '';
                vue.SFZdata.address = '';

                // 提交
                var tempMap = new Map();
                tempMap.set("jzkh", vue.SFZdata.jzkh);
                //map转obj
                var tempObj = Object.create(null);
                for (var key of tempMap) {
                    tempObj[key[0]] = key[1];
                }
                $.ajax({
                    url: "http://" + IpAndPort + "/LydjController/getBrxx",
                    type: "POST",
                    contentType: 'application/json;charset=utf-8',
                    data: JSON.stringify(tempObj),
                    success: function (data) {
                        var jsonObj = $.parseJSON(data);
                        if (jsonObj.status == true) {
                            // 赋值
                            var brxx = $.parseJSON(jsonObj.detail);
                            if (brxx == null) {
                                vue.$message.warning('此卡未建档');
                                return;
                            }
                            vue.SFZdata.name = brxx.brxm == undefined ? '' : brxx.brxm;
                            vue.SFZdata.gender = brxx.brxb == undefined ? '' : (brxx.brxb == '1' ? '男' : '女');
                            vue.SFZdata.sfzh = brxx.sfzh == undefined ? '' : brxx.sfzh;
                            vue.SFZdata.lxdh = brxx.lxdh == undefined ? '' : brxx.lxdh;
                        } else {
                            vue.$message.error('登记失败：' + jsonObj.detail);
                        }
                    },
                    error: function (data) {
                        vue.$message.error('登记失败：连接服务端失败');
                    }
                });
            },
            //
            // 当旅居史、发热史多选框的值被改变时
            //
            checkListChange(e) {
                vue.checkList_checkedArr = e;
                if (e.length == 3) {
                    vue.bzxxInputDisabled = true;
                } else {
                    vue.bzxxInputDisabled = false;   // 如果3个选项中有一个没勾选，则开启备注信息输入框
                }
            },
            //
            // 点击来院登记表格的【提交】按钮
            //
            submitForm() {
                // 校验必填项
                if (vue.SFZdata.name == '') {
                    vue.$message.warning('请填写姓名');
                    return;
                }
                if (vue.checkBoxList.length < 3 && vue.bzxx == '') {
                    vue.$message.warning('请填写备注');
                    return;
                }
                if (vue.visitReasonValue == '') {
                    vue.$message.warning('请填写来院目的');
                    return;
                }

                // 提交
                var tempMap = new Map();
                tempMap.set("brxm", vue.SFZdata.name);
                tempMap.set("brnl", vue.SFZdata.age);
                tempMap.set("brxb", vue.SFZdata.gender);
                tempMap.set("jtdz", vue.SFZdata.address);
                tempMap.set("lxdh", vue.SFZdata.lxdh);
                tempMap.set("sfzh", vue.SFZdata.sfzh);
                tempMap.set("jzkh", vue.SFZdata.jzkh);
                tempMap.set("yqbs", vue.currentSelectObj.value);
                tempMap.set("bzxx", vue.bzxx);
                tempMap.set("lymd", vue.visitReasonValue.label);

                if (vue.checkBoxList.indexOf('否认近期发热史 (T<37.3°C)') != -1) {
                    tempMap.set("frs", "否");
                } else {
                    tempMap.set("frs", "是");
                }
                if (vue.checkBoxList.indexOf('否认近期中高风险区旅居史 (30天内)') != -1) {
                    tempMap.set("jcs", "否");
                } else {
                    tempMap.set("jcs", "是");
                }
                if (vue.checkBoxList.indexOf('否认近期中高风险区接触史 (30天内)') != -1) {
                    tempMap.set("ljs", "否");
                } else {
                    tempMap.set("ljs", "是");
                }


                //map转obj
                var tempObj = Object.create(null);
                for (var key of tempMap) {
                    tempObj[key[0]] = key[1];
                }
                $.ajax({
                    url: "http://" + IpAndPort + "/LydjController/recordVisitorInfo",
                    type: "POST",
                    contentType: 'application/json;charset=utf-8',
                    data: JSON.stringify(tempObj),
                    success: function (data) {
                        var jsonObj = $.parseJSON(data);
                        if (jsonObj.status == true) {
                            // 赋值
                            vue.$message.success('登记成功');
                            // 刷新外面的报表
                            vue.retrieveStatistic();
                        } else {
                            vue.$message.error('登记失败：' + jsonObj.detail);
                        }
                    },
                    error: function (data) {
                        vue.$message.error('登记失败：连接服务端失败');
                    }
                });

                // 数据清空，表单隐藏
                vue.resetForm();
                vue.dialogFormVisible = false;

            },

            //
            // 点击来院登记表格的【取消】按钮
            //
            cancleForm() {
                // 数据清空，表单隐藏
                vue.resetForm();
                vue.dialogFormVisible = false;
            },
            //
            // 重置所有表单
            //
            resetForm() {

                vue.resetSfzForm();                     // 重置身份证表单
                vue.visitReasonValue = "";              // 清空来院目的
                vue.checkBoxList = vue.备份_checkBoxList;  // 全选checkbox
                vue.bzxxInputDisabled = true;             // 禁用备注输入框
                vue.bzxx = "";
            },
            //
            // 重置身份证表单
            //
            resetSfzForm() {
                // 头像重置
                document.getElementById('img').children[0].src = '/static/img/SFZ head 2.jpg';
                // 清空身份信息
                vue.SFZdata.name = '';
                vue.SFZdata.age = '';
                vue.SFZdata.gender = '';
                vue.SFZdata.sfzh = '';
                vue.SFZdata.address = '';
                vue.SFZdata.lxdh = '';
                vue.SFZdata.jzkh = '';
            },
            //
            // 点击【读身份证】
            //
            readSFZ() {
                $("#btn_readSFZ").blur();  // 按钮颜色恢复
                vue.isLoading_btn_readSFZ = true; // 按钮loading样式

                // 重置身份证表单
                vue.resetSfzForm();

                var ws = new WebSocket("ws://127.0.0.1:9998");

                //当WebSocket创建成功时，触发onopen事件
                ws.onopen = function () {
                    console.log("进入onopen事件");

                    // 消息发送到服务端
                    ws.send("ReadSFZ");

                };

                //当收到服务端发来的消息时，触发onmessage事件
                ws.onmessage = function (e) {
                    // console.log("接收到消息：" + e.data);

                    var jsonObj = $.parseJSON(e.data);
                    if (jsonObj.status == true) {
                        if (jsonObj.detail.photo != undefined) {
                            document.getElementById('img').children[0].src = 'data:image/bmp;base64,' + jsonObj.detail.photo;   //照片加载（服务端以base64编码照片文件，以字符串形式发送）
                            jsonObj.detail.photo = '';
                        }
                        vue.SFZdata = jsonObj.detail;

                        // 根据身份证号获取年龄
                        jQuery(function ($) {
                            vue.SFZdata.age = GetAge(vue.SFZdata.sfzh);
                        });

                    } else if (jsonObj.status == false) {
                        vue.$message.error('读卡失败：' + jsonObj.detail);
                    }

                    // 关闭webSocket
                    console.log("尝试断开WebSocket连接" + e.data);
                    ws.close();

                    //
                    vue.isLoading_btn_readSFZ = false; // 按钮loading样式

                };
                ws.onerror = function (e) {
                    vue.$message.error('读卡失败：不能连接到ChyReadCard服务');
                    console.log("读卡失败：不能连接到ChyReadCard服务" + e.data);
                    vue.isLoading_btn_readSFZ = false; // 按钮loading样式
                };
                ws.onclose = function (e) {
                    console.log("WebSocket连接已关闭");
                    vue.isLoading_btn_readSFZ = false; // 按钮loading样式
                };
            },
            //
            // 点击【读社保卡】
            //
            readYKT() {
                $("#btn_readYKT").blur();  // 按钮颜色恢复
                vue.isLoading_btn_readYKT = true; // 按钮loading样式

                // 重置身份证表单
                vue.resetSfzForm();

                var ws = new WebSocket("ws://127.0.0.1:9998");

                //当WebSocket创建成功时，触发onopen事件
                ws.onopen = function () {
                    console.log("进入onopen事件");
                    // 消息发送到服务端
                    ws.send("ReadYKT");
                };

                //当收到服务端发来的消息时，触发onmessage事件
                ws.onmessage = function (e) {

                    var jsonObj = $.parseJSON(e.data);
                    if (jsonObj.status == true) {
                        vue.SFZdata = jsonObj.detail;

                        // 根据身份证号获取年龄
                        jQuery(function ($) {
                            vue.SFZdata.age = GetAge(vue.SFZdata.sfzh);
                        });

                        // 根据卡号获取建档信息（联系电话、家庭电话、联系地址）
                        var tempMap = new Map();
                        tempMap.set("jzkh", vue.SFZdata.jzkh);
                        //map转obj
                        var tempObj = Object.create(null);
                        for (var key of tempMap) {
                            tempObj[key[0]] = key[1];
                        }
                        $.ajax({
                            url: "http://" + IpAndPort + "/LydjController/getBrxx",
                            type: "POST",
                            contentType: 'application/json;charset=utf-8',
                            data: JSON.stringify(tempObj),
                            success: function (data) {
                                vue.isLoading_btn_readYKT = false; // 按钮loading样式
                                var jsonObj = $.parseJSON(data);
                                if (jsonObj.status == true) {
                                    // 赋值
                                    var brxx = $.parseJSON(jsonObj.detail);
                                    if (brxx == null) {
                                        //vue.$message.warning('此卡未建档');
                                        return;
                                    }
                                    var 电话 = '';
                                    var 地址 = '';
                                    if (brxx.lxdh != undefined) {   // 电话依次取：联系电话、家庭电话
                                        电话 = brxx.lxdh;
                                    } else if (brxx.jtdh != undefined) {
                                        电话 = brxx.jtdh;
                                    }
                                    if (brxx.lxdz != undefined) { // 地址依次取：联系地址、户口地址、单位名称
                                        地址 = brxx.lxdz;
                                    } else if (brxx.hkdz != undefined) {
                                        地址 = brxx.hkdz;
                                    } else if (brxx.dwmc != undefined) {
                                        地址 = brxx.dwmc;
                                    }

                                    vue.SFZdata.address = 地址;
                                    vue.SFZdata.lxdh = 电话;
                                }
                            },
                            error: function (data) {
                                //vue.$message.error('登记失败：连接服务端失败');
                                vue.isLoading_btn_readYKT = false; // 按钮loading样式
                            }
                        });


                    } else if (jsonObj.status == false) {
                        vue.$message.error('读卡失败：' + jsonObj.detail);
                    }
                    // 关闭webSocket
                    console.log("尝试断开WebSocket连接" + e.data);
                    ws.close();
                    //
                };
                ws.onerror = function (e) {
                    vue.$message.error('读卡失败：不能连接到ChyReadCard服务');
                    console.log("读卡失败：不能连接到ChyReadCard服务" + e.data);
                    vue.isLoading_btn_readYKT = false; // 按钮loading样式
                };
                ws.onclose = function (e) {
                    console.log("WebSocket连接已关闭");
                    vue.isLoading_btn_readYKT = false; // 按钮loading样式
                };
            },

            //
            // 点击【菜单栏】
            //
            topMenu_handleSelect(key, keyPath) {
                console.log(key, keyPath);
                if (key == '2-2') {
                    document.cookie = "token=;path=/";  // token置空
                    window.location.href = "http://" + IpAndPort + "/ViewController/Login";
                }
            },
            leftMenu_handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            leftMenu_handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            leftMenu_handleSelect(key, keyPath) {
                console.log(key, keyPath);
                if (key == '1') {
                    // window.location.href = "http://" + IpAndPort + "/ViewController/CallNumber_YM";
                } else if (key == '2') {
                    window.location.href = "http://" + IpAndPort + "/ViewController/LYDJ_Statistic";
                }
            },

            //
            // 当【登记台】Select组件的项被用户修改时
            //
            onChangeElSelect(e) {
                vue.retrieveStatistic();// 立即刷新报表数据

            },

            //
            // 立即检索报表数据
            //
            retrieveStatistic() {
                // 提交
                var tempMap = new Map();
                tempMap.set("djsjBegin", dateFormat("YYYY-mm-dd", new Date()));
                tempMap.set("djsjEnd", dateFormat("YYYY-mm-dd", new Date()));
                tempMap.set("yqbs", vue.currentSelectObj.value);

                //map转obj
                var tempObj = Object.create(null);
                for (var key of tempMap) {
                    tempObj[key[0]] = key[1];
                }
                $.ajax({
                    url: "http://" + IpAndPort + "/StatisticController/getLydj",
                    type: "POST",
                    contentType: 'application/json;charset=utf-8',
                    data: JSON.stringify(tempObj),
                    success: function (data) {
                        var jsonObj = $.parseJSON(data);
                        if (jsonObj.status == true) {
                            // 赋值
                            var dataList = $.parseJSON(jsonObj.detail).data;
                            vue.tableData = dataList;

                        } else {
                            vue.$message.error('数据加载失败：' + jsonObj.detail);
                        }
                    },
                    error: function (data) {
                        vue.$message.error('数据加载失败：不能连接服务端');
                    }
                });
            },

            //
            // table时间格式化
            //
            dateFormatDJSJ: function (row, column) {
                var fmt = "YYYY-mm-dd HH:MM:SS";
                var date = new Date(row.djsj);//row 表示一行数据, yysj 表示要格式化的字段名称
                var ret;
                const opt = {
                    "Y+": date.getFullYear().toString(),        // 年
                    "m+": (date.getMonth() + 1).toString(),     // 月
                    "d+": date.getDate().toString(),            // 日
                    "H+": date.getHours().toString(),           // 时
                    "M+": date.getMinutes().toString(),         // 分
                    "S+": date.getSeconds().toString()          // 秒
                    // 有其他格式化字符需求可以继续添加，必须转化成字符串
                };
                for (var k in opt) {
                    ret = new RegExp("(" + k + ")").exec(fmt);
                    if (ret) {
                        fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
                    }
                    ;
                }
                ;
                return fmt;
            },
        },
        directives: {
            // 注册一个局部的自定义指令 v-focus
            focus: {
                // 指令的定义
                inserted: function (el) {
                    // 聚焦元素
                    el.querySelector('input').focus()
                }
            }
        }
    });


    //
    // 重设表格高度
    //
    var 网页总高度 = $("#app")[0].clientHeight;
    var 顶栏高度 = $("#topMenuRow")[0].clientHeight;
    var 间隔栏写死20px = 20;
    var 工具栏高度 = $("#toolBarRow")[0].clientHeight;
    var 分割线高度 = $("#dividerRow")[0].clientHeight;
    var 表格标签高度 = 0;
    var 表格高度 = 网页总高度 - 顶栏高度 - 间隔栏写死20px - 工具栏高度 - 分割线高度 - 表格标签高度;
    $("#statisticTable").css("height", 表格高度);


    /*
    * JS工具方法
    * */

    /**
     * 获取指定名称的cookie
     */
    function getCookie(name) {
        var strcookie = document.cookie;//获取cookie字符串
        var arrcookie = strcookie.split("; ");//分割
        //遍历匹配
        for (var i = 0; i < arrcookie.length; i++) {
            var arr = arrcookie[i].split("=");
            if (arr[0] == name) {
                return arr[1];
            }
        }
        return "";
    }

    /**
     * 时间日期格式化
     *
     */
    function dateFormat(fmt, date) {
        var ret;
        const opt = {
            "Y+": date.getFullYear().toString(),        // 年
            "m+": (date.getMonth() + 1).toString(),     // 月
            "d+": date.getDate().toString(),            // 日
            "H+": date.getHours().toString(),           // 时
            "M+": date.getMinutes().toString(),         // 分
            "S+": date.getSeconds().toString()          // 秒
            // 有其他格式化字符需求可以继续添加，必须转化成字符串
        };
        for (var k in opt) {
            ret = new RegExp("(" + k + ")").exec(fmt);
            if (ret) {
                fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
            }
            ;
        }
        ;
        return fmt;
    }


    //鼠标点击弹出爱心❤
    // jQuery(function ($) {
    //     showLoveWhenMouseClick(window, document);
    // });


</script>

</body>
<!-- 在body之后加载鼠标点击特效的JS（鼠标点击放烟花、弹出爱心❤） -->
<!--<script src="/static/js/mouse-click.js"></script>-->


<script src="/static/js/MyUtils.js"></script>

</html>